<template>
  <div>
    <!-- 图片上传 -->
    <!-- list-type : 指定文件列表的类型
         action : 必须参数，上传的地址
         file-list: 上传的文件列表
         limit: 最大允许上传个数
         on-preview: 点击文件列表中已上传的文件时的钩子
         on-remove:	文件列表移除文件时的钩子
         http-request:覆盖默认的上传行为，可以自定义上传的实现
         on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     -->
    <el-upload
      :class="{ disabled: isDisabled }"
      list-type="picture-card"
      action="#"
      :file-list="fileList"
      :limit="limit"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="uploadImg"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog
      title="预览图片"
      :visible="showDialog"
      @close="showDialog = false"
    >
      <img style="width: 100%" :src="imgUrl" />
    </el-dialog>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
// SecretId	用户的 SecretId
// SecretKey	用户的 SecretKey，建议只在前端调试时使用，避免暴露密钥
var cos = new COS({
  SecretId: 'AKIDoWFxcAXgdLq9F6jzAKOJDvTr56Zv7LTa',
  SecretKey: '4vsjX9Xnz1wpkRtQyaEiDg2LcicLqAKG'
})
export default {
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      showDialog: false, // 预览弹层的显示状态
      imgUrl: '', // 预览的图片地址
      fileList: [] // 上传图片列表
    }
  },
  computed: {
    isDisabled() {
      return this.fileList.length >= this.limit
    },
    uploadAllSuccess() {
      return this.fileList.every((item) => item.status === 'success')
    }
  },
  methods: {
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      // file：删除的文件对象
      // fileList： 删除文件之后，剩余的图片数组
      // 方式1
      // this.fileList = [...fileList]
      // 方式2
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      // file : 点击预览时拿到的图片对象
      // console.log(file)
      this.imgUrl = file.url
      this.showDialog = true
    },

    // 配置上传前的校验, 只要通过校验, 才能进行上传
    beforeUpload(file) {
      // console.log(file)
      const isLt5M = file.size / 1024 / 1024 < 5
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      if (!isPNG && !isJPG) {
        this.$message.error('上传头像图片只能是png格式或jpg格式')
      }
      if (!isLt5M) {
        this.$message.error('上传头像过大, 超过了5M, 必须5M以内')
      }
      // 当return 放回false 时，上传方法是不会执行的
      return isLt5M && (isPNG || isJPG)
    },

    uploadImg(obj) {
      // 上传图片时自定义上传，会覆盖掉默认上传
      // 将来这里我们要自己写Ajax上传图片
      // obj.file 就是将来用于上传的文件对象
      console.log(obj.file)
      const fileObj = this.fileList.find((item) => item.uid === obj.file.uid)
      // 文件上传的loading效果通过修改图片的status为uploading 来显示
      fileObj.status = 'uploading'
      // 使用cossdk包内部的方法，上传我们的图片

      cos.putObject(
        {
          Bucket: 'hmhr-1317673651' /* 填入您自己的存储桶，必须字段 */,
          Region: 'ap-beijing' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
          Key:
            parseInt(Math.random() * 999999) +
            obj.file
              .name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
          Body: obj.file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */,
          // 每上传一部分，都会触发，更新进度条
          // progressData：返回图片上传的进度信息
          onProgress: function (progressData) {
            console.log(JSON.stringify(progressData))
            // percentage:el-upload组件上传时圆环进度的百分比
            fileObj.percentage = parseInt(progressData.percent) * 100
          }
        },
        function (err, data) {
          console.log(err || data)
          fileObj.url = 'https://' + data.Location
          setTimeout(() => {
            fileObj.status = 'success'
          }, 2000)
        }
      )
    },
    handleChange(file, fileList) {
      console.log(file, fileList)
      this.fileList = [...fileList]
    }
  }
}
</script>
<style scoped lang="scss">
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
